<html lang="en" xmlns:ext="http://www.sencha.com/docs">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Ext JS 3.3.1 API Documentation</title>

<meta name="description" content="API Documentation for Ext JS - a cross-browser JavaScript framework for building rich internet applications." />
<link rel="stylesheet" type="text/css" href="resources/css/ext-all.css" />
<link rel="stylesheet" type="text/css" href="resources/css/xtheme-gray.css" />
<link rel="stylesheet" type="text/css" href="resources/docs.css" />
<link rel="stylesheet" type="text/css" href="resources/style.css" />    
<link rel="shortcut icon" href="resources/favicon.ico" />
<link rel="icon" href="resources/favicon.ico" />
<style type="text/css"></style>
<!-- GC -->
<script type="text/javascript" src="resources/ext-base.js"></script>
<script type="text/javascript" src="resources/ext-all.js"></script>
<script type="text/javascript" src="resources/TabCloseMenu.js"></script>
<script type="text/javascript" src="resources/docs.js"></script>
<script type="text/javascript" src="resources/tree.js"></script>


<link rel='stylesheet' type='text/css' href='style-table.css' />
<link type="text/css" href="jquery/themes/base/jquery.ui.all.css" rel="stylesheet" />

<script type="text/javascript" src="jquery/jquery-1.4.2.js"></script> 
<script type="text/javascript" src="jquery/ui/jquery.ui.core.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.widget.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.position.js"></script>
<script type="text/javascript" src="jquery/ui/jquery.ui.button.js"></script>
<script type="text/javascript" src="jquery/jquery-validate/jquery.validate.min.js"></script>



<!-- EXT Library -->
        
        <script type="text/javascript" src="ext3.3.1/examples/ux/TableGrid.js"></script>
        <link rel="stylesheet" type="text/css" href="ext3.3.1/examples/grid/grid-examples.css" />


        <style type="text/css">
        #the-table { border:1px solid #bbb;border-collapse:collapse; }
        #the-table td,#the-table th { border:1px solid #ccc;border-collapse:collapse;padding:5px; }
        </style>

<script>
	function getReport(){
		
		//serializeOthers :ham duoc viet ben file da include thu vien nay
		var dataString = jQuery("#report1form").serialize();

		jQuery.ajax({
			type: "POST",
			url: "report1.action",
			data: dataString,
			success: function(response) {
					
					jQuery("#reportResponse").html("");

				    var a1 = new Array();
				    a1 = response.trim().split(";");
				    var i = 0;

				    var a2 = new Array();
				    for(;i < a1.length-1 ; i++){
					a2[i] = a1[i].split(",");
				    }
				    Ext.grid.dummyData = a2;

				    Ext.QuickTips.init();
				    var xg = Ext.grid;

				    // shared reader
				    var reader = new Ext.data.ArrayReader({}, [
				       {name: 'khoa'},
				       {name: 'maNV'},
				       {name: 'tenNV'},
				       {name: 'tuoi', type: 'float'},
				       {name: 'gioitinh'},
				       {name: 'hesoluong', type: 'float'}
				    ]);

				    var store = new Ext.data.GroupingStore({
					    reader: reader,
					    data: xg.dummyData,
					    sortInfo:{field: 'maNV', direction: "ASC"},
					    groupField:'khoa'
					});

				    var grid = new xg.GridPanel({
					store: store,
					columns: [
					    {id:'khoa',header: "Khoa", sortable: true, dataIndex: 'khoa'},
					    {header: "maNV",  sortable: true,  dataIndex: 'maNV'},
					    {header: "tenNV",  sortable: true, dataIndex: 'tenNV'},
					    {header: "tuoi",  sortable: true, dataIndex: 'tuoi'},
					    {header: "hesoluong", sortable: true, dataIndex: 'hesoluong'},
					    {header: "gioitinh",  sortable: true, dataIndex: 'gioitinh'}
					],

					view: new Ext.grid.GroupingView({
					    forceFit:true,
					    groupTextTpl: '{text} ({[values.rs.length]} {[values.rs.length > 1 ? "Items" : "Item"]})'
					}),

					frame:true,
					autoHeight: true,
					collapsible: true,
					animCollapse: false,
					title: 'Grouping Department',
					iconCls: 'icon-grid',
					fbar  : ['->', {
					    text:'Clear Grouping',
					    iconCls: 'icon-clear-group',
					    handler : function(){
						store.clearGrouping();
					    }
					}],
					renderTo: 'reportResponse'
				    });

			}
		});
	
	}
</script>
</head>
<body scroll="no" id="docs">
<div id="loading-mask"></div>
<div id="loading">
    <div class="loading-indicator">
        <img src="resources/extanim32.gif" width="32" height="32" style="margin-right:8px;" align="absmiddle" />
        Loading&hellip;
    </div>
</div>

<div id="header">
    <img style="margin-left: 5px" src="resources/title-ext.png" alt="Ext JS API Documentation" height="49" width="380" />
    <div style="float:right; margin-top: 15px;margin-right: 10px;color: #CCC">
        <a href="http://dev.sencha.com/deploy/dev/examples/" style="padding:5px">examples</a> | 
        <a href="http://www.sencha.com/" style="padding:5px">sencha.com</a>
    </div>
</div>

<div id="classes"></div>

<div id="main"></div>

<select id="search-options" style="display:none">
    <option>Starts with</option>
    <option>Ends with</option>
    <option>Any Match</option>
</select>
</body>
</html>
